<?php
session_start();
include "../connexion.php";

  $pseudo = "Anonymous";  $id_pilot = 0;

if (isset ($_SESSION['site'])){
    $result = mysql_query("select latd, longd, nom, winch from site where id_site=".$_SESSION['site'].";");
    $val = mysql_fetch_array($result);
    $site_name = $val['nom'];
    $site_lat = $val['latd'];
    $site_lng = $val['longd'];
} else {
    $site_lat = 0;
    $site_lng = 0; 
    $site_name="Unnamed site";
}

if (isset ($_SESSION['id_membre'])){
	$auteur = mysql_fetch_array(mysql_query("select id_auteur, pseudo from auteur where id_auteur=".$_SESSION['id_membre'].";"));
	$pseudo = $auteur['pseudo']; $id_pilot = $auteur['id_auteur'];
}

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAloePAlEicH6IDTkMBLcJrhQXwnL9FxgcTH4vf2kk7gAE15haUxSJ7gKW1yxt4vCGL_lEpmkZonN36w" type="text/javascript"></script>

    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        var center = new GLatLng(<?php echo $site_lat.", ".$site_lng; ?>);
        map.setCenter(center, 2);
        map.addControl(new GSmallMapControl());
        map.addControl(new GHierarchicalMapTypeControl());
        map.addMapType(G_SATELLITE_3D_MAP);
        map.addMapType(G_PHYSICAL_MAP);
        map.setMapType(G_PHYSICAL_MAP);
	map.enableScrollWheelZoom()

        var marker = new GMarker(center, {draggable: true});

        GEvent.addListener(marker, "dragstart", function() {
          map.closeInfoWindow();
        });

        GEvent.addListener(marker, "dragend", function() {
          marker.openInfoWindowHtml("Site name : <input id='site_name' name='site_name' value='Unnamed site'></input>");
	  document.getElementById('takeoff_lat').value = marker.getLatLng().lat() ;
	  document.getElementById('takeoff_lng').value = marker.getLatLng().lng() ;
	  document.getElementById('site_name').value = "Unnamed site" ;
        });

        map.addOverlay(marker);

      }
    }
    </script>

<link href="../en-html/style/style.css" rel="stylesheet" type="text/css" />
<link
    href="external_js/carpe_slider/default.css"
    rel="stylesheet"
    type="text/css" />

<script
    language="JavaScript"
    src="external_js/carpe_slider/slider.js" >
</script>

<title>Let's go fly</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head>

<body onload="initialize()" onunload="GUnload()">

  <form action="pgepgsim_v0.php" method="post">
    
    <input type="hidden" name="pilot_id" value="<?php echo $id_pilot;?>" />
    <table>
	<tr>
		<td>
			<div class="rubriqueSite">
			<div class="titreMenu"> 1 - Pilot and site information</div>
			Pilot : <input name="pilot_name" value="<?php echo $pseudo;?>" /> <br />
			&nbsp;<br />
			Take off latitude : <input id="takeoff_lat" name="takeoff_lat" size="8" value="<?php echo $site_lat;?>" /> <br />
			Take off longitude : <input id="takeoff_lng" name="takeoff_lng" size="8" value="<?php echo $site_lng;?>" /> <br />
			Takeoff heading : <input type="text" name="takeoff_heading"  size="4" value="<?php echo $_GET['takeoff_heading'];?>" /> degrees<br />
			Altitude above launch : <input type="text" name="winch_altitude"  size="4" value="10" /> meters (default value 10m to avoid beeing stuck at game loading) => if winch start (flatland sites), put here the winch release altitude.
			</div>

<div class="rubriqueSite">
  <div class="titreMenu"> 2 - Set the weather conditions for the flight</div>
	  
<table>
<tbody><tr>
  <td colspan="3">
    <b>Wind : </b>
  </td>
</tr>
 <tr>

  <td align="right">
    Wind direction (coming from) :
  </td>
  <td>
	<table style="background-position: center center; background-repeat: no-repeat;" background="../en-html/rose/compass.png">
	<tbody><tr>
	<td valign="bottom" width="35" align="right" height="35"><input name="wind_direction" value="315" type="radio"></td>

        <td valign="top" align="center"><input name="wind_direction" value="0" type="radio"></td>
	<td valign="bottom" width="35" align="left"><input name="wind_direction" value="45" type="radio"></td>

	</tr>
	<tr>
	<td align="left"><input name="wind_direction" value="270" type="radio"></td>
        <td width="30" align="center" height="30">&nbsp;</td>
	<td align="right"> <input name="wind_direction" value="90" type="radio"></td>
	</tr>

	<tr>
	<td valign="top" align="right" height="35"><input name="wind_direction" value="225" type="radio"></td>

        <td valign="bottom" align="center"><input name="wind_direction" value="180" type="radio"></td>
	<td valign="top" align="left"><input name="wind_direction" value="135" type="radio"></td>
	</tr>
	</tbody></table>
    </td>
    <td>   &nbsp;
    </td>
  </tr>

<tr>
 <td align="right">
  Wind speed :
 </td>
 <td>
<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track" style="border-color: rgb(221, 238, 255) rgb(153, 170, 187) rgb(153, 170, 187) rgb(221, 238, 255); background-color: rgb(255, 255, 255);">
    <div class="carpe_slider_slit" style="border-color: rgb(187, 153, 153) rgb(255, 221, 221) rgb(255, 221, 221) rgb(187, 153, 153); background-color: rgb(51, 0, 0);">&nbsp;</div>
    <!-- Default position: 80px -->
    <div class="carpe_slider" id="sliderWindSpeed" display="displayWindSpeed" style="border-color: rgb(102, 153, 204) rgb(0, 51, 102) rgb(0, 51, 102) rgb(102, 153, 204); left: 40px; background-color: rgb(51, 102, 153);">&nbsp;</div>

  </div>
  <div class="carpe_slider_display_holder" style="border-color: rgb(221, 238, 255) rgb(153, 170, 187) rgb(153, 170, 187) rgb(221, 238, 255); background-color: rgb(255, 255, 255);">
    <!-- Default value: 180 -->
    <input class="carpe_slider_display" name="wind_speed" id="displayWindSpeed" style="background-color: rgb(255, 255, 255); color: rgb(34, 85, 136);" from="0" to="10" value="4" type="text">
  </div>
</div>
  </td>
  <td>  &nbsp;meters per second
  </td>

 </tr>
<tr>
  <td colspan="3">
    <b>Thermals : </b>
  </td>
</tr>
        <tr>
          <td align="right"> Thermals density :</td><td>

<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track" style="border-color: rgb(221, 238, 255) rgb(153, 170, 187) rgb(153, 170, 187) rgb(221, 238, 255); background-color: rgb(255, 255, 255);">
    <div class="carpe_slider_slit" style="border-color: rgb(187, 153, 153) rgb(255, 221, 221) rgb(255, 221, 221) rgb(187, 153, 153); background-color: rgb(51, 0, 0);">&nbsp;</div>
    <!-- Default position: 80px -->
    <div class="carpe_slider" id="sliderThermalsDensity" display="displayThermalsDensity" style="border-color: rgb(102, 153, 204) rgb(0, 51, 102) rgb(0, 51, 102) rgb(102, 153, 204); left: 50px; background-color: rgb(51, 102, 153);">&nbsp;</div>
  </div>
  <div class="carpe_slider_display_holder" style="border-color: rgb(221, 238, 255) rgb(153, 170, 187) rgb(153, 170, 187) rgb(221, 238, 255); background-color: rgb(255, 255, 255);">
    <!-- Default value: 180 -->
    <input class="carpe_slider_display" name="thermal_density" id="displayThermalsDensity" style="background-color: rgb(255, 255, 255); color: rgb(34, 85, 136);" from="0" to="4" value="2" type="text">

  </div>
</div>
          </td>
          <td>  &nbsp;thermals&nbsp;per&nbsp;km&nbsp;square
          </td>
        </tr>
        <tr>
          <td align="right">

            Thermals max height : </td>
          <td>

<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track" style="border-color: rgb(221, 238, 255) rgb(153, 170, 187) rgb(153, 170, 187) rgb(221, 238, 255); background-color: rgb(255, 255, 255);">
    <div class="carpe_slider_slit" style="border-color: rgb(187, 153, 153) rgb(255, 221, 221) rgb(255, 221, 221) rgb(187, 153, 153); background-color: rgb(51, 0, 0);">&nbsp;</div>
    <!-- Default position: 80px -->
    <div class="carpe_slider" id="sliderThermalsHeight" display="displayThermalsHeight" style="border-color: rgb(102, 153, 204) rgb(0, 51, 102) rgb(0, 51, 102) rgb(102, 153, 204); left: 50px; background-color: rgb(51, 102, 153);">&nbsp;</div>
  </div>

  <div class="carpe_slider_display_holder" style="border-color: rgb(221, 238, 255) rgb(153, 170, 187) rgb(153, 170, 187) rgb(221, 238, 255); background-color: rgb(255, 255, 255);">
    <!-- Default value: 180 -->
    <input class="carpe_slider_display" name="thermal_height" id="displayThermalsHeight" style="background-color: rgb(255, 255, 255); color: rgb(34, 85, 136);" from="0" to="4200" value="2100" type="text">
  </div>
</div>

          </td>
          <td>&nbsp;meters&nbsp;ASL
          </td>
        </tr>

        <tr>
          <td align="right">
            Thermals average max uplift speed :  </td>
            <td>

<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track" style="border-color: rgb(221, 238, 255) rgb(153, 170, 187) rgb(153, 170, 187) rgb(221, 238, 255); background-color: rgb(255, 255, 255);">
    <div class="carpe_slider_slit" style="border-color: rgb(187, 153, 153) rgb(255, 221, 221) rgb(255, 221, 221) rgb(187, 153, 153); background-color: rgb(51, 0, 0);">&nbsp;</div>
    <!-- Default position: 80px -->

    <div class="carpe_slider" id="sliderThermalsSpeed" display="displayThermalsSpeed" style="border-color: rgb(102, 153, 204) rgb(0, 51, 102) rgb(0, 51, 102) rgb(102, 153, 204); left: 50px; background-color: rgb(51, 102, 153);">&nbsp;</div>
  </div>
  <div class="carpe_slider_display_holder" style="border-color: rgb(221, 238, 255) rgb(153, 170, 187) rgb(153, 170, 187) rgb(221, 238, 255); background-color: rgb(255, 255, 255);">
    <!-- Default value: 180 -->
    <input class="carpe_slider_display" name="thermal_speed" id="displayThermalsSpeed" style="background-color: rgb(255, 255, 255); color: rgb(34, 85, 136);" from="2" to="10" value="6" type="text">
  </div>
</div>

          </td>
          <td> meters per second
          </td>

        </tr>
        <tr>
          <td align="right">
            Thermals size :</td><td>
            <input name="thermal_size" id="thermal_size_small" value="40" type="radio"><label for="thermal_size_small"> small </label>
            <br>
            <input name="thermal_size" id="thermal_size_medium" value="60" checked="checked" type="radio"><label for="thermal_size_medium"> medium </label>

            <br>
            <input name="thermal_size" id="thermal_size_big" value="80" type="radio"><label for="thermal_size_big"> large </label>
          </td>
        </tr>
      </tbody></table>
</div>



		</td>
		<td valign="top">
			<div class="rubriqueSite">
			<div class="titreMenu"> 1.5 - Drag the flag to spot your personalized take off</div>
			<div id="map_canvas" style="width:400px;height:400px"></div>
			</div>
		</td>
	</tr>
  </table>



<div class="rubriqueSite">
  <div class="titreMenu"> 3 - Select glider look (same performances...)</div>
    <table width="100%">
    <tr>
     <td width="17%" align="center">
    <label for="striped"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=46001b9d0a2df91b5e6ec957e2143302&rtyp=st&ctyp=other"  />
    <br /><input type="radio" name="glider" id="striped" value="4e01a5a1f374d9d3a426bad1ca64772" checked> White/blue striped </label>
     </td><td width="16%" align="center">
    <label for="yellow"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=52df851a45ec0dc73a426bad1ca64772&rtyp=st&ctyp=other"  />
    <br /><input type="radio" name="glider" id="yellow" value="52df851a45ec0dc73a426bad1ca64772"> Yellow   </label>
     </td><td width="17%" align="center">
    <label for="red"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=206fcd97f76b645f3a426bad1ca64772&rtyp=st&ctyp=other"  />
    <br /><input type="radio" name="glider" id="red" value="206fcd97f76b645f3a426bad1ca64772"> Red </label>
     </td><td width="16%" align="center">
    <label for="blue"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=c5e687317aa46cc13a426bad1ca64772&rtyp=st&ctyp=other"  />
    <br /><input type="radio" name="glider" id="blue" value="c5e687317aa46cc13a426bad1ca64772"> Blue </label>
     </td><td width="17%" align="center">
    <label for="white"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=123f9c53d58dff103a426bad1ca64772&rtyp=st&ctyp=other"  />
    <br /><input type="radio" name="glider" id="white" value="123f9c53d58dff103a426bad1ca64772"> White  </label>
     </td><td width="16%" align="center">
    <label for="pink"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=d592753b940336353a426bad1ca64772&rtyp=st&ctyp=other"  />
    <br /><input type="radio" name="glider" id="pink" value="d592753b940336353a426bad1ca64772"> Pink  </label>
     </td>
    </tr>
    </table>

</div>

<div class="rubriqueSite">
<div class="titreMenu"> 4 - (ok, we said three steps, but...) Validate and go fly !</div>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Fly !"></p>
  &nbsp;
</div>

</form>

</body>

</html>
